<script setup lang="ts">
import { reactive, ref, unref } from 'vue'
import { Form, message } from 'ant-design-vue'
import { getLoginSMCode, loginPN } from '@/api/auth'
import { handleApi, handleForm } from '@/utils/alert'
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router'
import { RuleObject } from 'ant-design-vue/es/form';


const router = useRouter()
const { updateToken, updateUser } = useUserStore()
const sendTimer = ref(0)
const loading = ref(false)

const rules = reactive<PartialRecord<PNLoginReq, RuleObject[]>>({
  mobile: [
    { required: true, message: '请填写手机号码', trigger: 'change' }
  ],
  ver_code: [
    { required: true, message: '请输入短信验证码', trigger: 'blur' }
  ],
  role_type: []
})

const formState = reactive<PNLoginReq>({
  mobile: import.meta.env.PROD ? '' : '13777777777',
  ver_code: import.meta.env.PROD ? '' : '5205',
  role_type: 1
})

const { validate, validateInfos } = Form.useForm(formState, rules)

const startTimer = () => {
  sendTimer.value = 60
  const timer = setInterval(() => {
    sendTimer.value = Math.max(sendTimer.value - 1, 0)
    if (sendTimer.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}


const sendSMCode = () => {
  if (sendTimer.value > 0) {
    message.error('发送过于频繁, 请稍后再试')
  } else if (!formState.mobile) {
    message.error('请填写有效的手机号码')
  } else {
    getLoginSMCode(formState).then(() => {
      message.success('发送成功, 请注意查收')
      startTimer()
    }).catch(handleApi)
  }
}

const onSubmit = async () => {
  loading.value = true
  const res = await validate<PNLoginReq>().catch(handleForm)
  if (res) {
    const auth = await loginPN(res).catch(handleApi)
    if (auth) {
      updateToken(auth.data)
      updateUser(unref({ ...formState, ...auth.data }))
      router.push('/')
    }
  }
  loading.value = false
}


</script>

<template>
  <div class="bg-gray-400 absolute w-screen h-screen">
    <div class="bg-white w-96 p-5 absolute right-40 top-40 rounded-xl shadow-md">
      <div class="text-blue-500 text-base py-2">登录注册</div>
      <div class="w-full h-0.5 bg-gray-200">
        <div class="w-16 h-full bg-blue-500"></div>
      </div>
      <AForm autocomplete="off" class="py-5" layout="vertical" :model="formState" @finish="onSubmit">
        <AFormItem v-bind="validateInfos.role_type">
          <ARadioGroup v-model:value="formState.role_type">
            <ARadio :value="1">我是商家</ARadio>
            <ARadio :value="2">我是供应商</ARadio>
          </ARadioGroup>
        </AFormItem>
        <AFormItem label="账号" v-bind="validateInfos.mobile">
          <AInput placeholder="请输入账号" v-model:value="formState.mobile"></AInput>
        </AFormItem>
        <div class="text-right h-0">
          <AButton size="small" type="link" @click="sendSMCode" :disabled="sendTimer > 0">{{ sendTimer > 0 ? `${sendTimer} 秒` : '发送验证码' }}</AButton>
        </div>

        <AFormItem label="短信验证码" v-bind="validateInfos.ver_code">
          <AInput placeholder="请输入验证码" v-model:value="formState.ver_code"></AInput>
        </AFormItem>

        <AButton type="primary" block size="large" html-type="submit" :loading="loading">登录</AButton>
      </AForm>
    </div>
  </div>
</template>